<template>
    <AdminMain>
        <!-- 搜索 -->
        <el-form :model="query" ref="search" :rules="rules" label-width="80px" inline>
            <el-form-item label="路由地址" prop="router">
                <el-input v-model="query.router"></el-input>
            </el-form-item>
            <el-form-item label="管理员ID">
                <el-date-picker v-model="query.time" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
                    value-format="YYYY-MM-DD HH:mm:ssZ"
                    :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getLog">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="logList?.data" border stripe :row-key="row_key">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID" width="90" align="center" />
            <el-table-column prop="Admin.name" label="管理员" width="150" align="center" />
            <el-table-column prop="ip" label="IP" width="170" align="center" />
            <el-table-column prop="created_at" label="时间" width="180" :formatter="formatTime" align="center" />
            <el-table-column prop="router" label="路由" max-width="200" align="left" />
            <el-table-column prop="message" label="内容" max-width="300" align="center" />
            <el-table-column label="操作" width="220" fixed="right" align="center" />
        </el-table>
        <!-- 分页 -->
        <el-pagination class="my-pagination" @size-change="limitChange" @current-change="getLog"
            v-model:currentPage="query.page" :page-sizes="[10, 20, 50, 100]" :page-size="query.limit"
            layout="total, sizes, prev, pager, next" :total="logList?.total" background>
            :pager-count="7">
        </el-pagination>

    </AdminMain>
</template>

<script setup lang="ts">
import { getAdminLogs } from '@/apis/auth'
import { ref, reactive, onBeforeMount } from 'vue'
import AdminMain from '@/layout/adminMain.vue'
import { FormInstance } from 'element-plus'
import { formatTime } from '@/utils/help'

const search = ref<FormInstance>()
const query = ref<AdminLogForm>({
    router: '', admin_id: 0,
    time: [], page: 1, limit: 10
})
const rules = reactive({
    router: [{ max: 100, message: '路由地址最长为100个字符', trigger: 'blur' }]
})
const logList = ref<PageResponse<AdminLogsModel>>()

async function getLog() {
    // console.log(query.value)
    const r = await getAdminLogs(query.value)
    // console.log(r.data)
    logList.value = r.data
}
async function reset() {
    search.value?.resetFields()
    await getLog()
}
function row_key(log: AdminLogsModel) {
    return log.id
}
function limitChange(limit: number) {
    query.value.limit = limit
    getLog()
}

onBeforeMount(() => {
    getLog()
})
</script>

<style lang="scss" scoped></style>